<template>
  <div>
    <el-card>
      <div class="table-top" >
        <el-button v-has-permi="['event:class:add']" type="primary"  @click="handlerAdd">增加</el-button>
        <!-- <el-button type="success">编辑</el-button> -->
        <el-button v-has-permi="['event:class:delete']" type="danger" @click="del">删除</el-button>
      </div>

      <div class="table-content">
        <!-- default-expand-all -->
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px"      row-key="id" border  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="分类名称" />
          <el-table-column prop="" label="操作">
            <template #default="scope"> <el-button type="success" v-has-permi="['event:class:edit']" v-if="scope.row.id!='00'" size="small" @click="edit(scope.row)">编辑</el-button> </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="title" width="500">
      <el-form ref="FormRef" style="max-width: 800px" :model="Form" label-width="auto" class="demo-ruleForm" status-icon>
        <el-form-item label="分类名称:" prop="name" :rules="[{ required: true, message: '请输入分类名称' }]">
          <el-input v-model="Form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="上级分类:" prop="parentId" :rules="[{ required: true, message: '请选择上级分类' }]">
          <el-tree-select default-expand-all placeholder="请选择" style="width: 100%;" v-model="Form.parentId" :data="tableData" :props="treeprops" :node-key="'id'" check-strictly />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="enter"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {eventcalssList ,eventcalssAdd,eventcalssEdit,eventcalssDel} from '@/api/event'
import { onMounted } from 'vue'

const FormRef = ref()
const data = reactive({
    tableData:[],
    multipleSelection:[],// table选择
    dialogVisible:false,
    title:"",
    Form:{
      name:"",
      parentId:"",
    },
    treeprops:{
      label:'name',
      value:"id"
    }
})
const {tableData ,multipleSelection ,dialogVisible,title ,Form ,treeprops} = toRefs(data)

///* table选择 */
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(val);


}
/* add */
const handlerAdd = async()=>{
  dialogVisible.value = true
  title.value = '增加'
  Form.value = {
    name:"",
      parentId:"",

  }
}
const enter = ()=>{
  console.log(Form.value);
  FormRef.value?.validate(async(flag:boolean)=>{
    if(flag){
      const res =   title.value == '增加'?await eventcalssAdd({...Form.value}) : await eventcalssEdit({...Form.value})
      console.log(res);
      if(res.code==200){
        dialogVisible.value = false
        ElMessage.success(title.value+'成功')
        await getTreeList()
      }

    }
  })


}

/* edit */
const edit = (row)=>{
  console.log(row);
  
  title.value = '修改'
  dialogVisible.value = true
  Form.value = {
    name:row.name,
    parentId:row.parentId,
    id:row.id
  }
  console.log(Form.value);

}

/* del */
const del = async()=>{

  if(!multipleSelection.value.length ){
    ElMessage.error('请至少选择一条数据')
    return false
  }

  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      let arr = []
      multipleSelection.value&&multipleSelection.value.forEach(element => {
        arr.push(element.id)
      });
      console.log(arr);


      const res= await eventcalssDel(arr)
      console.log(res);
      if(res.code==200){

      ElMessage({
        type: 'success',
        message: '删除成功',
      })

      await getTreeList()
      }

    })
    .catch(() => {

    })
}

const getTreeList = async()=>{
    const res= await eventcalssList()
    console.log(res);
    if(res.data){
        tableData.value  = res.data
    }



}

onMounted(async()=>{
    await getTreeList()

})
</script>

<style scoped lang="scss">
.table-top {
    margin-bottom: 20px;
  }
</style>
